<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<span>Top:</span><jigsaw-input [(value)]="top" width="80px"></jigsaw-input>
<jigsaw-button (click)="popupDialog1(dialog1)">popup</jigsaw-button>

{{message}}
<ng-template #dialog1>
    <jigsaw-dialog width="40%" caption="dialog title" [top]="top" (close)="close()">
        <ul class="dialog-content">
            <li>Dialog content...</li>
            <li>Dialog content...</li>
            <li>Dialog content...</li>
        </ul>
        <div jigsaw-button-bar>
            <jigsaw-button colorType="danger" (click)="close()">OK</jigsaw-button>
        </div>
    </jigsaw-dialog>
</ng-template>

